<template>
	<div class="payment">
		<back-header>确认付款</back-header>
		<div class="payment-container">
			<order-info v-if="order" :orderInfo="order.orderInfo"/>
			<address-info v-if="address" :addressInfo="address"/>
		</div>
		<div class="payment-btn">
			<button @click="weChatPay">微信支付 <span v-if="order">{{order.orderInfo.amountReal | formatMoney}}</span>
			</button>
		</div>
	</div>
</template>

<script>
	import Order from '@/services/order';
	import UserAddress from '@/services/userAddress';
	import backHeader from '#/Public/backHeader';
	import orderInfo from '#/Payment/orderInfo';
	import addressInfo from '#/Payment/addressInfo';

	const _order = new Order();
	const _userAddress = new UserAddress();
	export default {
		name: "Payment",
		data() {
			return {
				order: null,
				address: null
			}
		},
		created() {
			this.getOrderDetail();
			this.getDefaultAddress();
		},
		methods: {
			getOrderDetail() {
				let id = this.$route.params.id;
				_order.getOrderDetail(id).then(res => {
					this.order = res.data;
				})
			},
			getDefaultAddress() {
				_userAddress.getDefaultAddress().then(res => {
					this.address = res.data;
				})
			},
			getPayData() {
				let obj = {
					"price": this.order.orderInfo.amountReal, // 支付价钱
					"id": this.order.orderInfo.id, // 生成订单后的id字段
					"token": this.$store.state.user.token // 代表了是哪个用户
				};
				return JSON.stringify(obj);
			},
			weChatPay() {
				let state = this.getPayData();
				const MWEB_URL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe93d3f996beab1eb&redirect_uri=http://www.wyunfei.com/&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`;
				window.location.href = MWEB_URL;
			}
		},
		components: {
			backHeader,
			orderInfo,
			addressInfo
		}
	}
</script>
